<template>
  <div class="user-profile">
    <h1>{{ user.name }}的金融画像</h1>

    <div class="user-info">
      <p>性别：{{ user.gender }}</p>
      <p>年龄：{{ user.age }}</p>
      <p>职业：{{ user.occupation }}</p>
      <p>收入：{{ user.income }}</p>
    </div>

    <div class="financial-info">
      <h2>风险指数：{{ riskIndex }}</h2>
      <h2>预测收益率：{{ predictedReturn }}%</h2>
      <h2>最差收益：{{ worstReturn }}%</h2>
      <h2>最佳收益：{{ bestReturn }}%</h2>

      <div class="expected-return-chart">
        <!-- 使用第三方库（如Echarts）绘制预期收益曲线 -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    alert("calculating data")
    return {
      user: {
        name: '张三',
        gender: '男',
        age: 30,
        occupation: '白领',
        income: '10万/年'
      },
      riskIndex: 3,
      predictedReturn: 5,
      worstReturn: -2,
      bestReturn: 10
    }
  }
}
</script>

<style>
/* 样式可以根据需求进行调整 */
.user-profile {
  padding: 20px;
}

.user-info {
  margin-bottom: 20px;
}

.financial-info {
  border: 1px solid #ccc;
  padding: 20px;
  margin-bottom: 20px;
}

.expected-return-chart {
  height: 300px;
}
</style>